<template>
	<div>
		<div style="margin: 20px;">
			<el-radio-group v-model="radioButton" size="medium">
				<el-radio-button label="产品信息"></el-radio-button>
				<el-radio-button label="相关费用"></el-radio-button>
				<el-radio-button label="数据收集"></el-radio-button>
				<el-radio-button label="风控规则"></el-radio-button>
				<el-radio-button label="合同模板"></el-radio-button>
				<el-radio-button label="审批流程"></el-radio-button>
			</el-radio-group>
		</div>
		<!-- <div style="width: 97%;height: 1000px;box-shadow:0 0 10px #d7d7d7;margin: 0 auto;">
			<div class="title">基本信息</div>
		</div> -->

		<!-- 产品信息页面 -->
		<el-card v-if="radioButton == '产品信息'" class="box-card">
			<div class="title">基本信息</div>
			<div class="message-box">
				<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

					<el-row type="flex" style="margin-top: 20px;" justify="space-around">
						<el-col :span="11">
							<el-form-item label="产品名称" prop="productName">
								<el-input style="width: 400px;" placeholder="请输入产品名称" v-model="ruleForm.productName">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="11">
							<el-form-item label="产品分类" prop="productClassify">
								<el-select style="width: 400px;" v-model="ruleForm.productClassify"
									placeholder="请选择产品分类">
									<el-option label="类型一" value="type1"></el-option>
									<el-option label="类型二" value="type2"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>

					<el-row type="flex" justify="space-around">
						<el-col :span="11">
							<el-form-item label="所属资方" prop="capital">
								<el-select style="width: 400px;" v-model="ruleForm.capital" placeholder="请选择资金方">
									<el-option label="资方一" value="capital1"></el-option>
									<el-option label="资方二" value="capital2"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="11">
							<el-row type="flex">
								<el-form-item label="融资金额" prop="productName">
									<el-input style="width: 175px;" v-model="ruleForm.productName">
										<template slot="append">万元</template>
									</el-input>
								</el-form-item>
								<div style="width: 50px;height: 40px;text-align: center;line-height:40px">~</div>
								<div>
									<el-input style="width: 175px;" v-model="ruleForm.productName">
										<template slot="append">万元</template>
									</el-input>
								</div>
							</el-row>
						</el-col>
					</el-row>
					<el-row type="flex" justify="space-around">
						<el-col :span="11">
							<el-row type="flex">
								<el-form-item label="年利率" prop="rate">
									<el-select style="width: 140px;" v-model="ruleForm.rate" placeholder="请选择年利率">
										<el-option label="利率一" value="type1"></el-option>
										<el-option label="利率二" value="type2"></el-option>
									</el-select>
								</el-form-item>
								<div style="width: 20px;height: 40px;text-align: center;line-height:40px"></div>
								<div>
									<el-input disabled style="width: 110px;" v-model="ruleForm.productName">
										<template slot="append">%</template>
									</el-input>
								</div>
								<div style="width: 20px;height: 40px;text-align: center;line-height:40px">~</div>
								<div>
									<el-input disabled style="width: 110px;" v-model="ruleForm.productName">
										<template slot="append">%</template>
									</el-input>
								</div>
							</el-row>
						</el-col>
						<el-col :span="11">
							<el-form-item label="还款类型" prop="refund">
								<el-select style="width: 400px;" v-model="ruleForm.refund" placeholder="请选择还款类型">
									<el-option label="类型一" value="refund1"></el-option>
									<el-option label="类型二" value="refund2"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row type="flex" justify="space-around">
						<el-col :span="11">
							<el-form-item label="计费方式" prop="refund">
								<el-select style="width: 400px;" v-model="ruleForm.refund" placeholder="选择计费方式">
									<el-option label="类型一" value="refund1"></el-option>
									<el-option label="类型二" value="refund2"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="11">
							<el-row type="flex">
								<el-form-item label="借款期限" prop="rate">
									<el-select style="width: 140px;" v-model="ruleForm.rate" placeholder="选择借款期限">
										<el-option label="利率一" value="type1"></el-option>
										<el-option label="利率二" value="type2"></el-option>
									</el-select>
								</el-form-item>
								<div style="width: 20px;height: 40px;text-align: center;line-height:40px"></div>
								<div>
									<el-input  style="width: 110px;" v-model="ruleForm.productName">
										<template slot="append">%</template>
									</el-input>
								</div>
								<div style="width: 20px;height: 40px;text-align: center;line-height:40px">~</div>
								<div>
									<el-input  style="width: 110px;" v-model="ruleForm.productName">
										<template slot="append">%</template>
									</el-input>
								</div>
							</el-row>
						</el-col>
						
					</el-row>
					<el-row type="flex" justify="space-around">
						<el-col :span="11">
							<el-form-item label="放款方式" prop="loan">
								<el-select style="width: 400px;" v-model="ruleForm.loan" placeholder="请选择放款方式">
									<el-option label="方式一" value="loan1"></el-option>
									<el-option label="方式二" value="loan2"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="11">
							<el-row type="flex">
								<el-form-item label="收费方式" prop="loan">
									<el-select style="width: 400px;" v-model="ruleForm.loan" placeholder="请选择收费方式">
										<el-option label="方式一" value="loan1"></el-option>
										<el-option label="方式二" value="loan2"></el-option>
									</el-select>
								</el-form-item>
							</el-row>
						</el-col>
					</el-row>
					<el-row type="flex" justify="space-around">
						<el-col :span="11">
							<el-form-item label="提前还款" prop="loan">
								<el-select style="width: 400px;" v-model="ruleForm.loan" placeholder="请选择提前还款">
									<el-option label="方式一" value="loan1"></el-option>
									<el-option label="方式二" value="loan2"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="11">
							<el-row type="flex">
								<el-form-item label="产品标签" prop="loan">
									<el-select style="width: 400px;" v-model="ruleForm.loan" placeholder="请选择产品标签">
										<el-option label="方式一" value="loan1"></el-option>
										<el-option label="方式二" value="loan2"></el-option>
									</el-select>
								</el-form-item>
							</el-row>
						</el-col>
					</el-row>
					<el-row type="flex" justify="space-around">
						<el-col :span="11">
							<el-row type="flex">
								<el-form-item label="可贷成数" prop="productName">
									<el-input style="width: 175px;" v-model="ruleForm.productName">
										<template slot="append">%</template>
									</el-input>
								</el-form-item>
								<div style="width: 50px;height: 40px;text-align: center;line-height:40px">~</div>
								<div>
									<el-input style="width: 175px;" v-model="ruleForm.productName">
										<template slot="append">%</template>
									</el-input>
								</div>
							</el-row>
						</el-col>
						<el-col :span="11">
							<el-form-item label-width="110px" label="代收代付类型" prop="capital">
								<el-select style="width: 400px;" v-model="ruleForm.capital" placeholder="代收代付类型">
									<el-option label="资方一" value="capital1"></el-option>
									<el-option label="资方二" value="capital2"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row type="flex" justify="space-around">
						<el-col :span="11">
							<el-form-item label="是否跳转" prop="capital">
								<el-select style="width: 400px;" v-model="ruleForm.capital" placeholder="是否跳转">
									<el-option label="是" value="capital1"></el-option>
									<el-option label="否" value="capital2"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="11"></el-col>
					</el-row>
				<!-- 	<el-row type="flex" justify="space-around">
						<el-col :span="11">
							<el-form-item label="产品标签" prop="tag">
								<el-select style="width: 400px;" v-model="ruleForm.tag" placeholder="请选择产品标签(最多三个)">
									<el-option label="类型一" value="tag1"></el-option>
									<el-option label="类型二" value="tag2"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="11">
							<el-form-item label="宽限期限" prop="gracePeriod">
								<el-input style="width: 400px;" placeholder="请输入宽限期限" v-model="ruleForm.gracePeriod">
									<template slot="append">天</template>
								</el-input>
							</el-form-item>
						</el-col>
					</el-row> -->
					<el-row type="flex" justify="space-around" v-if="ruleForm.capital == 'capital1'">
						<el-col :span="11">
							<el-form-item label-width="130px" label="H5开通跳转地址" prop="capital">
								<el-input style="width: 400px;" placeholder="H5融资跳转地址" v-model="ruleForm.productName">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="11">
							<el-form-item label-width="130px" label="H5融资跳转地址" prop="capital">
								<el-input style="width: 400px;" placeholder="H5融资跳转地址" v-model="ruleForm.productName">
								</el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row type="flex" justify="space-around" v-if="ruleForm.capital == 'capital1'">
						<el-col :span="11">
							<el-form-item label-width="130px" label="PC开通跳转地址" prop="capital">
								<el-input style="width: 400px;" placeholder="PC开通跳转地址" v-model="ruleForm.productName">
								</el-input>
							</el-form-item>
						</el-col>
						<el-col :span="11">
							<el-form-item label-width="130px" label="PC融资跳转地址" prop="capital">
								<el-input style="width: 400px;" placeholder="PC融资跳转地址" v-model="ruleForm.productName">
								</el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row type="flex" justify="space-around">
						<el-col :span="23">
							<el-form-item label="产品说明" prop="productRemark">
								<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 4}" placeholder="请输入产品说明"
									v-model="ruleForm.productRemark"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row type="flex" justify="space-around">
						<el-col :span="23">
							<el-form-item label="开通说明" prop="productRemark">
								<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 4}" placeholder="请输入开通说明"
									v-model="ruleForm.productRemark"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row type="flex" justify="space-around">
						<el-col :span="23">
							<el-form-item label="融资说明" prop="productRemark">
								<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 4}" placeholder="请输入融资说明"
									v-model="ruleForm.productRemark"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<div class="title">基本信息</div>
			<el-button type="primary" size="small" style="margin-bottom: 20px;">添加<i
					class="el-icon-plus el-icon--right"></i></el-button>
			<el-table :data="tableData" stripe style="width: 100%">
				<el-table-column type="index" label="序号" width="50">
				</el-table-column>
				<el-table-column align="center" prop="date" label="流程标题">
				</el-table-column>
				<el-table-column align="center" prop="name" label="流程描述">
				</el-table-column>
				<el-table-column align="center" prop="address" label="流程图标">
				</el-table-column>
				<el-table-column align="center" prop="address" label="排序">
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 相关费用页面 -->
		<el-card v-if="radioButton == '相关费用'" class="box-card">
			<div class="title">资方费用</div>
			<div class="interest-box">
				<el-switch style="align-self: center;margin-left: 20px;" v-model="correlativeCharges.interest"
					active-text="利息">
				</el-switch>
				<div style="font-size: 14px;position: absolute;right:5%;line-height: 50px;color: #c5c5c5;">选择费用规则 >
				</div>
			</div>
			<div class="interest-box">
				<el-switch style="align-self: center;margin-left: 20px;" v-model="correlativeCharges.serviceCharge"
					active-text="提前结清服务费">
				</el-switch>
				<div style="font-size: 14px;position: absolute;right:5%;line-height: 50px;color: #c5c5c5;">选择费用规则 >
				</div>
			</div>
			<div class="interest-box">
				<el-switch style="align-self: center;margin-left: 20px;"
					v-model="correlativeCharges.repaymentServiceCharge" active-text="提前还款服务费">
				</el-switch>
				<div style="font-size: 14px;position: absolute;right:5%;line-height: 50px;color: #c5c5c5;">选择费用规则 >
				</div>
			</div>
			<div class="interest-box">
				<el-switch style="align-self: center;margin-left: 20px;" v-model="correlativeCharges.rolloverInterest"
					active-text="展期利息">
				</el-switch>
				<div style="font-size: 14px;position: absolute;right:5%;line-height: 50px;color: #c5c5c5;">选择费用规则 >
				</div>
			</div>
			<div class="interest-box">
				<el-switch style="align-self: center;margin-left: 20px;" v-model="correlativeCharges.overdueInterest"
					active-text="逾期利息">
				</el-switch>
				<div style="font-size: 14px;position: absolute;right:5%;line-height: 50px;color: #c5c5c5;">选择费用规则 >
				</div>
			</div>
			<div class="title">平台费用</div>
			<!-- <el-form :model="correlativeCharges" :rules="rules1" ref="correlativeCharges" label-width="100px"
				class="demo-ruleForm">
				<el-form-item label="产品标签" prop="account">
					<el-select style="width: 400px;" v-model="correlativeCharges.account" placeholder="请选择平台账号">
						<el-option label="账号1" value="account1"></el-option>
						<el-option label="账号2" value="account2"></el-option>
					</el-select>
				</el-form-item>
			</el-form> -->
			<el-button type="primary" size="small" style="margin-bottom: 20px;">添加<i
					class="el-icon-plus el-icon--right"></i></el-button>
			<el-table :data="tableData" stripe style="width: 100%">
				<el-table-column type="index" label="序号" width="50">
				</el-table-column>
				<el-table-column align="center" prop="date" label="费用名称">
				</el-table-column>
				<el-table-column align="center" prop="name" label="费用类型">
				</el-table-column>
				<el-table-column align="center" prop="address" label="计算节点">
				</el-table-column>
				<el-table-column align="center" prop="address" label="计费方式">
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 数据收集页面 -->
		<el-card v-if="radioButton == '数据收集'" class="box-card">
			<div class="title">基本数据</div>
			<div class="message-box">
				<el-form style="height: 100px;" :model="creditForm" :rules="rules2" ref="creditForm" label-width="100px"
					class="demo-ruleForm">
					<el-form-item style="margin-top: 50px;" label="授信表单" prop="account">
						<el-select style="width: 400px;" v-model="creditForm.form" placeholder="请选择授信表单">
							<el-option label="账号1" value="form1"></el-option>
							<el-option label="账号2" value="form2"></el-option>
						</el-select>
					</el-form-item>
				</el-form>
			</div>
			<div class="title">其他数据</div>
			<el-button @click="dialogDataVisible = true" type="primary" size="small" style="margin-bottom: 20px;">添加<i
					class="el-icon-plus el-icon--right"></i></el-button>
			<el-table :data="tableData" stripe style="width: 100%">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column type="index" label="序号" width="50">
				</el-table-column>
				<el-table-column align="center" prop="date" label="资料名称">
				</el-table-column>
			</el-table>
		</el-card>

		<!-- 风控规则页面 -->

		<el-card v-if="radioButton == '风控规则'" class="box-card">
			<div class="title">基本数据</div>
			<div class="message-box">
				<el-form :model="companyForm" :rules="rules3" ref="companyForm" label-width="100px"
					class="demo-ruleForm">

					<el-row type="flex" style="margin-top: 20px;" justify="space-around">
						<el-col :span="11">
							<el-form-item label="企业白名单" prop="companyName">
								<el-select style="width: 400px;" v-model="companyForm.companyName"
									placeholder="请选择企业白名单">
									<el-option label="中国银行白名单" value="list1"></el-option>
									<el-option label="建设银行白名单" value="list2"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="11">
							<el-form-item label="评分模板" prop="companyGrade">
								<el-select style="width: 400px;" v-model="companyForm.companyGrade"
									placeholder="请选择评分模板">
									<el-option label="工商银行企业贷评分模板" value="grade1"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</div>
			<div style="float: right;margin: 20px;">
				<el-button>取消</el-button>
				<el-button type="success">上架</el-button>
				<el-button type="primary">保存</el-button>
			</div>
		</el-card>


		<!-- 合同模板 -->
		<el-card v-if="radioButton == '合同模板'" class="box-card">
			<div class="title">合同模板</div>
			<el-button @click="dialogContractVisible = true" type="primary" size="small" style="margin-bottom: 20px;">
				添加<i class="el-icon-plus el-icon--right"></i></el-button>
			<div class="message-box">
				<el-table :data="tableData" stripe style="width: 100%">
					<el-table-column type="index" label="序号" width="50">
					</el-table-column>
					<el-table-column align="center" prop="date" label="资料名称">
					</el-table-column>
				</el-table>
			</div>
			<div style="float: right;margin: 20px;">
				<el-button>取消</el-button>
				<el-button type="success">上架</el-button>
				<el-button type="primary">保存</el-button>
			</div>
		</el-card>

		<!-- 审批流程 -->
		<el-card v-if="radioButton == '审批流程'" class="box-card">
			<div class="title">流程审批</div>
			<div class="message-box">
				<el-table :data="flowData" stripe style="width: 100%">
					<el-table-column type="index" label="序号" width="50">
					</el-table-column>
					<el-table-column align="center" prop="name" label="流程名称">
					</el-table-column>
					<el-table-column align="center" label="流程名称">
						<template slot-scope="scope">
							<!-- <div style="color: #3390FC;">{{scope.row.bindFlow}}</div> -->
							<el-select style="width: 400px;" v-model="scope.row.value"
								placeholder="请选择流程">
								<el-option v-for="item in flowData" :label="item.bindFlow" :value="item.bindFlow"></el-option>
							</el-select>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<div style="float: right;margin: 20px;">
				<el-button>取消</el-button>
				<el-button type="success">上架</el-button>
				<el-button type="primary">保存</el-button>
			</div>

		</el-card>


		<!-- 对话框 -->
		<el-dialog title="选择资料" :visible.sync="dialogDataVisible">
			<el-form :model="creditForm">
				<el-form-item label="资料名称" label-width="120">
					<el-input style="width: 200px;" placeholder="按名称搜索" v-model="creditForm.dataName"></el-input>
					<el-button style="margin-left:20px;" type="primary" icon="el-icon-search">搜索</el-button>
					<el-button type="info" icon="el-icon-delete">删除</el-button>
				</el-form-item>
			</el-form>
			<el-table stripe height="400" :data="dataList">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column type="index" label="序号" width="50"></el-table-column>
				<el-table-column property="name" label="资料名称" align="center"></el-table-column>
			</el-table>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogDataVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogDataVisible = false">确 定</el-button>
			</div>
		</el-dialog>
		<el-dialog title="选择合同" :visible.sync="dialogContractVisible">
			<el-form :model="creditForm">
				<el-form-item label="资料名称" label-width="120">
					<el-input style="width: 200px;" placeholder="按名称搜索" v-model="creditForm.dataName"></el-input>
					<el-button style="margin-left:20px;" type="primary" icon="el-icon-search">搜索</el-button>
					<el-button type="info" icon="el-icon-delete">删除</el-button>
				</el-form-item>
			</el-form>
			<el-table stripe height="400" :data="dataList">
				<el-table-column type="selection" width="55">
				</el-table-column>
				<el-table-column type="index" label="序号" width="50"></el-table-column>
				<el-table-column property="name" label="资料名称" align="center"></el-table-column>
			</el-table>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogContractVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogContractVisible = false">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				radioButton: '产品信息',
				ruleForm: {
					productName: '',
					productClassify: '',
					capital: '',
					financingAmount1: '',
					financingAmount2: '',
					rate: '',
					refund: '',
					loan: '',
					financingMaturity: '',
					tag: '',
					gracePeriod: '',
					productRemark: ''
				},
				creditForm: {
					form: '',
					dataName: ''
				},
				companyForm: {
					companyName: '',
					companyGrade: ''
				},
				rules3: {
					companyName: [{
						required: true,
						message: '请选择企业白名单',
						trigger: 'change'
					}],
					companyGrade: [{
						required: true,
						message: '请选择评分模板',
						trigger: 'change'
					}]
				},
				rules2: {
					form: [{
						required: true,
						message: '请选择平台账号',
						trigger: 'change'
					}]
				},
				dialogDataVisible: false,
				dialogContractVisible: false,
				dataList: [{
						name: '公章',
					},
					{
						name: '营业执照',
					},
					{
						name: '征信报告',
					},
					{
						name: '公章',
					},
					{
						name: '营业执照',
					},
					{
						name: '财务报表',
					},
					{
						name: '公章',
					},
					{
						name: '营业执照',
					},

				],
				flow:[
					{
						flowName:''
					},
					{
						flowName:''
					},
					{
						flowName:''
					},
					{
						flowName:''
					},
					{
						flowName:''
					},
					{
						flowName:''
					}
				],
				flowData: [{
						name: '申请额度-核心企业',
						bindFlow: '核心企业额度申请',
						value:''
					},
					{
						name: '开单',
						bindFlow: '开单流程',
						value:''
					},
					{
						name: '融资',
						bindFlow: '融资流程',
						value:''
					},
					{
						name: '核心企业自主申请额度',
						bindFlow: '额度申请',
						value:''
					},
					{
						name: '核心企业自主申请额度',
						bindFlow: '额度激活',
						value:''
					},
					{
						name: '放款',
						bindFlow: '放款申请',
						value:''
					},
				],
				tableData: [],
				correlativeCharges: {
					interest: false,
					serviceCharge: false,
					repaymentServiceCharge: false,
					rolloverInterest: false,
					overdueInterest: false,
					account: ''
				},
				rules1: {
					account: [{
						required: true,
						message: '请选择平台账号',
						trigger: 'change'
					}]
				},
				rules: {
					productName: [{
						required: true,
						message: '请输入产品名称',
						trigger: 'blur'
					}],
					productClassify: [{
						required: true,
						message: '请选择产品类型',
						trigger: 'change'
					}],
					capital: [{
						required: true,
						message: '请选择所属资方',
						trigger: 'change'
					}],
					financingAmount1: [{
						required: true,
						message: '请选择融资金额',
						trigger: 'change'
					}],
					rate: [{
						required: true,
						message: '请选择利率',
						trigger: 'blur'
					}],
					refund: [{
						required: true,
						message: '请选择年利率',
						trigger: 'change'
					}],
					loan: [{
						required: true,
						message: '请选择年利率',
						trigger: 'change'
					}],
					financingMaturity: [{
						required: true,
						message: '请选择融资期限',
						trigger: 'blur'
					}],
					tag: [{
						required: true,
						message: '请选择产品标签',
						trigger: 'change'
					}],
					gracePeriod: [{
						required: true,
						message: '请选择宽限期限',
						trigger: 'blur'
					}],
					productRemark: [{
						required: true,
						message: '请输入产品说明',
						trigger: 'blur'
					}],
				}
			}
		},
		created() {

		},
		methods: {

		}
	}
</script>

<style>
	.box-card {
		width: 98%;
		margin: 0 auto
	}

	.title {
		border-left: 5px solid #3390FC;
		height: 20px;
		width: 80px;
		line-height: 20px;
		text-align: center;
		font-weight: bold;
		margin: 20px 0;
	}

	.message-box {
		width: 100%;
		/* height: 500px; */
		margin: 0 auto;
		/* box-shadow:0 0 10px #d7d7d7; */
		border: 1px solid #b7b7b7;
		border-radius: 5px;
	}

	.interest-box {
		width: 100%;
		display: flex;
		height: 50px;
		margin: 0 auto;
		margin: 20px 0;
		/* box-shadow:0 0 10px #d7d7d7; */
		border: 1px solid #b7b7b7;
		border-radius: 5px;
	}
</style>
